<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-26 09:16:44
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 14:23:24
 * @FilePath: /vue3-cesium-plus/src/components/control/vc-search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="vc-sign-control" :style="positionStyle" >
      <div class="vc-button" @click="onTap">
            <img src="@/assets/svg/sign.svg" class="image" />
            <span>标记</span>
      </div>
    </div>
    <vc-collection-billboard :billboards="billboards"></vc-collection-billboard>
  </template>
  
<script setup lang="ts">
import { ref } from "vue";


import { positionProps, usePosition } from '../composables/usePosition'
import { useCustomCesium } from "../useCustomCesium";
const {vueCesium} = useCustomCesium();
const props = defineProps({
    ...positionProps,
})
const { positionStyle } = usePosition(props)
const billboards= ref<any>([])
import {useCesiumClick} from "../vc-street-control/useCesiumClick.ts"
const {addClickListener,removeClickListener} = useCesiumClick()
import { useVisiable } from "../vc-vr-zuji-control/useVisiable.ts";
const { visible } = useVisiable();
import {createComponent} from '@/components/createComponent.ts'
import VcSignControlButton from './vc-sign-control-button.vue'
import VcSignTable from './vc-sign-table.vue'
import * as Cesium from 'cesium'

const onTap = ()=>{
  visible(vueCesium.viewer,false);
  const { close } = createComponent(VcSignControlButton, {
    onTap: (payload: any) => {

      if(payload.index == 0){
        visible(vueCesium.viewer,true);
        billboards.value = [];
        removeClickListener();
        close();  
      }else if (payload.index == 1) {
        const { close } = createComponent(VcSignTable, {
            billboards:billboards.value,
            onTap: (data:any) => {
              console.log("点击了表格",data)
                close();
            },
            onDel: (index: number) => {
                billboards.value.splice(index,1)
            },
            onSave: (data: any) => {
              console.log("需要保存的数据",billboards.value,data)
              
            }
        });
      }
    },
  });

  addClickListener(vueCesium.viewer,(data: any) => {
    console.log("____data点击",data)
    const billboard = {} as any;
    billboard.position = Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude);
    billboard.image = "https://zouyaoji.top/vue-cesium/images/grepin.png"
    billboard.scale = 0.5;
    billboard.scaleByDistance = new Cesium.NearFarScalar(1.5e2, 1.2, 8.0e6, 0.5),
    billboard.data = data;
    billboard.name = "标记点" + (billboards.value.length + 1);
    billboards.value.push(billboard);
    
  })


}


</script>
  
<style scoped lang="scss">
  .vc-sign-control{
    position: absolute;
    z-index: 100;
    .vc-button{
        img{
            width: 14px;
            height: 14px;
        }
    }
    .active {
      background: var(--el-color-primary);
      color: #fff;
    }
    
  }
</style>